<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <div class="demo-input-size">
        <el-input
                size="medium"
                placeholder="请输入操作人姓名"
                suffix-icon="el-icon-date"
                style="display: inline-block;width: 200px;"
                v-model="searchInfo.username"
        >
        </el-input>
        <el-input
                size="medium"
                placeholder="请输入操作名称"
                suffix-icon="el-icon-date"
                style="display: inline-block;width: 200px;"
                v-model="searchInfo.msg"
        >
        </el-input>
        <el-button icon="el-icon-search" type="success" style="border-radius: 30px" @click="searchLog()">搜索操作</el-button>
        <el-button icon="el-icon-sort" type="warning" style="border-radius: 30px" @click="exportLog()">导出</el-button>
        <el-table
                :data="logArr"
                border
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="操作人姓名"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="msg"
                    label="操作名称"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="result"
                    label="操作结果"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="time"
                    label="操作时间">
            </el-table-column>
            <el-table-column
                    prop="ipaddr"
                    label="IP地址">
            </el-table-column>
            <el-table-column
                    prop="data"
                    label="操作目的">
            </el-table-column>
        </el-table>
        <el-pagination
                background
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="totalCount">
        </el-pagination>
    </div>
</div>
<script>

    var danghui = new Vue({
        el: "#app",
        data: {
            searchInfo: {
                name:"",
                msg:""
            },
            logArr: [],
            totalCount: 0
        },
        methods: {

            exportLog(){
                window.location.href = "/ssm/logSource/download?name="+danghui.searchInfo.username+"&msg"+danghui.searchInfo.msg+"&pageNo=1&pageCount=10";
            },

            searchLog() {
                getData(1, 10);
            },
            handleCurrentChange(val) {
                getData(val, 10)
            }
        }
    });

    function getData(a, b) {
        danghui.searchInfo.pageNo = a;
        danghui.searchInfo.pageCount = b;
        $.post("/ssm/log/query", danghui.searchInfo, function (backData) {
            danghui.logArr = backData.data.currentData;
            danghui.totalCount = backData.data.totalCount;
        });
    }

    getData(1, 10);

</script>
</body>
</html>